<html>
	<head>
		<meta charset="utf-8" />
		<title>文档处理</title>
	</head>
	<style type="text/css">
	    #tab{width: 260px;height: 200px; margin: 0 auto;border: 1px solid #000;cursor: pointer;}
	    #connet div{display: none;}
	    ul{width: inherit;}
	    li{list-style:none;float:left;width: 80px;}
    </style>
	<script src="js/jquery-2.2.3.min.js"></script>
	<body>
		<div id="tab">			
			<ul>
				<li>tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
			<div id="connet">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		    </div>
		</div>
	</body>
	<script type="text/javascript">
	     var num=0;
	     var time=null;
	     function show () {
	     	time=setInterval(function  () {
	     	$("#connet div").css("display","none");
	     	$("#connet div").eq(num).css("display","block");
		     	num++;
		     	if(num==$("ul li").length){
		     		num=0;
		     	}
		     },1000);
	     }
	     show();
	     $("#tab").mouseover(function(){
	     	clearInterval(time);
	     });
	     $("#tab").mouseout(function(){
	     	show();
	     });
	     $("ul li").click(function(){
		     	$("#connet div").css("display","none");
	     	    $("#connet div").eq($(this).index()).css("display","block");
	     });//Jquery:$(this).index()当前索引
	     //Js:this.index 当前索引
	</script>
</html>